<template>
    <div>
        <section class="header text-center">
		<nav class="navbar navbar-expand-lg navbar-light navbar-custom">
			<div class="container"><a class="navbar-brand" href="/"><i class="fas fa-shopping-bag primary-color mr-1"></i>{{ $t('m.name') }}</a>
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-1" aria-controls="navbar-1" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
				<div class="collapse navbar-collapse pull-xs-right justify-content-end" id="navbar-1">
					<ul class="navbar-nav mt-2 mt-md-0">
						<li class="nav-item active"><a class="nav-link" href="#">{{ $t('m.home') }}<span class="sr-only">(current)</span></a></li>
						<li class="nav-item dropdown mega-menu"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ $t('m.shop') }}</a>
							<div class="dropdown-menu" aria-labelledby="navbarDropdown">
								<div class="container">
									<div class="divider"></div>
									<div class="row">
										<div class="col-md-2">
											<h6 class="text-uppercase">Women's</h6>
											<ul class="nav flex-column">
												<li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
											</ul>
										</div>
										<div class="col-md-2">
											<h6 class="text-uppercase">Men's</h6>
											<ul class="nav flex-column">
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
											</ul>
										</div>
										<div class="col-md-2">
											<h6 class="text-uppercase">Girl's</h6>
											<ul class="nav flex-column">
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
											</ul>
										</div>
										<div class="col-md-2">
											<h6 class="text-uppercase">Boy's</h6>
											<ul class="nav flex-column">
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
											</ul>
										</div>
										<div class="col-md-4">
											<h6 class="text-uppercase">Featured Items</h6>
											<div class="row">
												<div class="col-6 text-center"><a href="item.html">
													<img src="images/placeholder-product.jpg" alt="" class="img-fluid mt-2 mb-3"></a>
													<h6 class="mb-0"><a href="item.html">Product Name</a></h6>
													<p><span class="emphasis">$49.00</span></p>
													<a href="#" class="btn btn-sm btn-outline-secondary mt-0">Buy Now</a>
										</div>
												<div class="col-6 text-center"><a href="item.html">
													<img src="images/placeholder-product.jpg" alt="" class="img-fluid mt-2 mb-3"></a>
													<h6 class="mb-0"><a href="item.html">Product Name</a></h6>
													<p><span class="emphasis">$49.00</span></p>
													<a href="#" class="btn btn-sm btn-outline-secondary mt-0">Buy Now</a>
										</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</li>
						<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ $t('m.page') }}</a>
							<div class="dropdown-menu" aria-labelledby="navbarDropdown"><a class="dropdown-item" href="index.html">Homepage</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="catalog.html">Catalog</a>
								<a class="dropdown-item" href="item.html">Item Detail</a>
								<a class="dropdown-item" href="cart.html">Cart</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="contact.html">Contact</a>

							</div>
						</li>
						<li class="nav-item"><a class="nav-link" href="contact.html">{{ $t('m.contact') }}</a></li>
						<li class="nav-item dropdown">
							<!-- 检索功能 -->
							<Search @search="search" v-model="text"></Search>
							<!-- <div v-width="300"><AutoComplete :option="param" v-model="value" @change="onChange" type="title"></AutoComplete></div> -->
						</li>
						<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" target="_blank" href="/cart" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-shopping-cart"></i> <span class="badge badge-pill badge-primary">{{ totalcount }}</span></a>
							<div class="dropdown-menu dropdown-menu-right dropdown-cart" aria-labelledby="navbarDropdown">
								<h6>{{ totalcount }}件商品<span class="emphasis">总价：￥{{ totalprice }}</span></h6>
								<div class="dropdown-divider"></div>
								<ul class="shopping-cart-items">
									<li class="row">
										<div class="col-3">
											<img :src="src" width="60">
										</div>
										<div class="col-9">
											<h6><a href="item.html">Product Name</a></h6>
											<span class="text-muted">1x</span>
											<span class="emphasis">$49.00</span></div>
									</li>
								</ul>
								
								<a href="cart.html" class="btn btn-lg btn-full-width btn-primary" style="margin: 0;">View Cart</a></div>
						</li>
					</ul>
				</div>
				<div>
					<div v-if="username == ''">
						<router-link to="/login">
							{{ $t('m.login') }}
						</router-link>
						/
						<router-link to="/register">
							{{ $t('m.register') }}
						</router-link>
					</div>
					<div v-else>
						<!-- <a>只能兼容网页 -->
						{{ $t('m.welcome') }}：<router-link to="/myprofile">{{ username }}</router-link>
						&nbsp;&nbsp;
						<a href="#" @click="logout">{{ $t('m.logout') }}</a>
						&nbsp;&nbsp;
						<a href="addgoods">{{ $t('m.addgoods') }}</a>
					</div>
				</div>
			</div>
			<!-- 语言开关 -->
			<h-switch v-model="lang" @change="lang_change">中/英</h-switch>
		</nav>
	</section>
    </div>
</template>

<script>
// 导包
import jsonp from 'fetch-jsonp';

const loadData = function (filter, callback) {
  // this 为 option 配置
  // this.orgId 使用传递的参数获取数据，例：搜索某公司下的员工
  jsonp(`https://suggest.taobao.com/sug?code=utf-8&q=${filter}`)
    .then(response => response.json())
    .then((d) => {
      callback(d.result.map((r) => {
        return r[0];
      }));
    });
};

export default {
    data () {
        return {
			username: '',
			// 语言变量
			lang: false,
			// 检索关键字
			text: '',
			// 智能提示控件
			value: '',
			param: {
			orgId: 1, // 自定义参数传递
			loadData,
			minWord: 1
			},
			src: '',
			id: '',
			name: '',
			price: ''
        }
	},

	// 接收参数
	props:['totalcount', 'totalprice'],

	mounted: function() {
		// // 调用商品信息接口
		// this.getdata();

		// 登录微博/钉钉账号
		// 接收参数
		var sina_id = this.$route.query.sina_id;
		var ding_id = this.$route.query.ding_id;

		if (sina_id) {
			// 自动登录
			localStorage.setItem('username', sina_id);
			localStorage.setItem('uid', this.$route.query.uid);
		}
		if (ding_id) {
			// 自动登录
			localStorage.setItem('username', ding_id);
			localStorage.setItem('uid', this.$route.query.uid);
      	}

		// 判断用户是否登录
		// let uname = localStorage.getItem('username');
		var uname = localStorage.getItem('username');

		// 未登录或者已登出
		if (uname == null) {
			this.username = '';
		} else {
			this.username = uname
		}

		// 自动判断语言
		// console.log(navigator.language);
		if (navigator.language == 'zh-CN') {
			this.$i18n.locale = 'zh';
		} else {
			this.$i18n.locale = 'en';
		}

		// 判断语言选择
		// this.$i18n.locale = localStorage.getItem('lang');
		// // 反向关联
		// if (this.$i18n.locale == 'zh') {
		// 	this.lang = 0; 
		// } else {
		// 	this.lang = 1;
		// }
	},
	
	
	methods: {
		// 商品信息接口
		getdata: function () {
			// 发送请求
			this.axios.get('http://localhost:8000/goodinfo/',{
				params: {
				id: this.id,
				}}).then((result) =>{

				console.log(result);
				
				this.name = result.data.name;
				this.price = result.data.price;

				var parms = result.data.parms;
				// 转换类型
				parms = JSON.parse(parms);
				this.src = 'http://localhost:8000/static/upload/' + result.data.img;
				console.log(parms);
			})
		},

		// 关键词变更
	    onChange(data, trigger) {
    		console.log(data, trigger);
		},
		
		// 检索逻辑
		search: function () {
			// 跳转
			this.$router.push({'path': '/search', query: {word: this.text}})
		},

		// 语言切换事件
		lang_change () {
			// console.log(this.lang);
			// 判断语言
			if (this.lang == true){
				// 英文
				this.$i18n.locale = 'en'
				localStorage.setItem('lang', 'en')
			} else {
				// 中文
				this.$i18n.locale = 'zh'
				localStorage.setItem('lang', 'zh')
			}
		},

		// 注销
		logout: function () {
			// 删除username
			localStorage.removeItem('username')

			// 全量删除 localStorage.clear()

			// 清空
			this.username = '';

			// 跳转
			this.$router.push('/login')
		}  
    },
}
</script>

<style>
    
</style>